<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">活动详情——{{activityData.activity_title}}</nut-navbar>
    <div class="container">
      <div class="swiper row" v-if="swiperList.length > 0">
        <nut-swiper direction="horizontal" ref="demo3" :loop="true" :canDragging="false" :paginationVisible="true"
                    :autoPlay="2500">
          <div class="nut-swiper-slide gray" v-for="(item, index) in swiperList" :key="index">
            <img class="w-100" :src="item.imgUrl"/>
          </div>
        </nut-swiper>
        <div class="button">
          <router-link class="float yellow text-center m-b-10" :to="`/reserve?activityId=${activityId}`">团房通道</router-link>
          <router-link class="float c-yellow text-center" to="/orderList">订单中心</router-link>
        </div>
      </div>
      <div class="box f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333">活动名</div>
        <div class="text c-666">{{activityData.activity_title}}</div>
      </div>
      <div class="line row"></div>
      <div class="box f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333">主办方</div>
        <div class="text c-666">{{activityData.client}}</div>
      </div>
      <div class="line row"></div>
      <div class="box f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333">活动时间</div>
        <div class="text c-666">{{startTime}}—{{endTime}}</div>
      </div>
      <div class="line row"></div>

      <div class="box dis-flex just-con-s-b align-items-c f-s-14 p-t-10 p-b-10">
        <div class="left">
          <div class="title f-w-b m-b-5 c-333">活动地址</div>
          <div class="text c-666">{{activityData.address}}</div>
        </div>
        <div class="right flex-sh-0">
          <div class="icon icon-location"></div>
        </div>
      </div>

      <div class="box dis-flex just-con-s-b align-items-c f-s-14 p-t-10 p-b-10">
        <div class="left">
          <div class="title f-w-b m-b-5 c-333">会议室名称</div>
          <div class="text c-666">{{activityData.meeting_name}}</div>
        </div>
        <div class="right flex-sh-0">
          <div class="icon icon-location"></div>
        </div>
      </div>

      <div class="line row" v-if="activityData.activity_info"></div>
      <div class="box f-s-14 p-t-10 p-b-10" v-if="activityData.activity_info">
        <div class="title f-w-b m-b-5 c-333">活动简介</div>
        <div class="text c-666">{{activityData.activity_info}}</div>
      </div>
      <div class="line row"></div>
      <div v-if="activityData.dues_show === 1">
        <div class="box f-s-14 p-t-10 p-b-10">
          <div class="title f-w-b m-b-10">参会人员</div>
          <div class="sponsor f-s-14 dis-flex">
            <div class="case text-center flex-sh-0 m-r-10" v-for="(item, index) in sponsorList" :key="index">
              <div class="img">
                <img class="w-100 h-100" :src="item.user_icon" />
              </div>
              <div class="nowrap-ellipsis text-center f-s-12">{{item.user_name}}</div>
              <div class="f-s-12">+{{item.other_price}}</div>
            </div>
          </div>
        </div>
        <div class="line row"></div>
      </div>
      <div class="box f-s-14 p-t-10 p-b-10">
        <div class="title f-w-b m-b-5 c-333">活动流程</div>
        <div class="text c-666">
          <div v-html="process"></div>
        </div>
      </div>
      <div class="line row"></div>
      <div class="box f-s-14 p-t-10 p-b-10 c-666">
        <div class="dis-flex" v-if="activityData.hotel_name">
          <div class="title flex-sh-0">酒店名称：</div>
          <div class="nowrap-ellipsis">{{activityData.hotel_name}}</div>
        </div>
        <div class="dis-flex" v-if="activityData.room_leader">
          <div class="title flex-sh-0">活动接待：</div>
          <div class="nowrap-ellipsis">{{activityData.activity_leader}}</div>
        </div>
        <div class="dis-flex" v-if="activityData.phone">
          <div class="title flex-sh-0">接待电话：</div>
          <a class="dis-block nowrap-ellipsis c-blue" :href="`tel:${activityData.phone}`">
            {{activityData.phone}}
          </a>
        </div>
        <div class="dis-flex" v-if="activityData.address">
          <div class="title flex-sh-0">活动地址：</div>
          <div>{{activityData.address}}</div>
        </div>
        <div class="dis-flex" v-if="activityData.traffic">
          <div class="title flex-sh-0">交通指引：</div>
          <div>{{activityData.traffic}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import wx from "weixin-js-sdk"
  import { getDetailsByIdApi } from '../../api/record'
  import { wxInit } from '../../utils/weixin-init'
  import { getSponsorApi } from '../../api/details'
  import { ImgUrl, IconUrl } from '../../utils/auxiliary'
  import { getSwiperApi } from '../../api/common'

  export default {
    data () {
      return {
        activityId: '',
        activityData: {},
        startTime: '',
        endTime: '',
        process: '',
        swiperList: [],
        sponsorList: []
      }
    },
    async mounted () {
      if (!/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || !this.shareReady) {
        await wxInit()
      }
      this.activityId = this.$route.query.activityId
      this.getData()
      this.getSwiper()
    },
    methods: {
      async getData () {
        const { activityById } = await getDetailsByIdApi({ activityId: this.activityId })
        this.activityData = activityById
        this.process = ImgUrl(activityById.activity_process)
        this.startTime = moment(activityById.start_time).format('YYYY年MM月DD日 HH:mm')
        this.endTime = moment(activityById.end_time).format('YYYY年MM月DD日 HH:mm')
        const { list: sponsorList } = await getSponsorApi({ activityId: this.activityId })
        this.sponsorList = sponsorList
        const imgUrl = IconUrl(`${activityById.activity_icon}`)
        const _this = this
        wx.ready(function() {
          wx.updateAppMessageShareData({
            title: '在线报名—' + activityById.activity_title, // 分享标题
            desc: activityById.activity_info,
            link: 'http://' + _this.host + '/details?activityId=' + _this.activityId, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl // 分享图标
          })
          wx.updateTimelineShareData({
            title: '在线报名—' + activityById.activity_title, // 分享标题
            desc: activityById.activity_info,
            link: 'http://' + _this.host + '/details?activityId=' + _this.activityId, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl // 分享图标
          })
        })
      },
      async getSwiper () {
        const swiperList = await getSwiperApi({ id: this.activityId })
        this.swiperList = swiperList.map(v => {
          return Object.assign({}, { imgUrl: IconUrl(v.photoUrl) })
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .swiper {
    position: relative;
    .button {
      position: absolute;
      top: 30px;
      right: 0;
      .float {
        padding: 5px 10px;
        background: #1C1C1B;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        opacity: 0.8;
      }
      .yellow {
        color: #1C1C1B;
        background: #CBA15A;
      }
    }
  }
  .line {
    height: 5px;
    background: #F1F1F1;
  }
  .box {
    .text {
      line-height: 25px;
    }
    .sponsor {
      flex-wrap: nowrap;
      overflow: auto;
      .case {
        width: 40px;
        .img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
  }
  .icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .icon-location {
    background-image: url("../../assets/icon/icon-location.png");
  }
</style>
